<template>
  <el-card class="box-card">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="160px"
      size="medium"
    >
      <el-form-item label="交易类型 :" prop="name">
        <button class="head-buttonTX">提现</button>
        <button class="head-buttonZH">划转</button>
      </el-form-item>
      <el-row>
        <el-col :span="11">
          <el-form-item label="付款账户 :" prop="region">
            <el-select
              v-model="ruleForm.region"
              placeholder="请输入"
              class="form-width"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="户名 :" prop="name">
            <span>潍坊艾瑞克电子商务有限公司</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="收款账户类型 :" prop="name">
        <el-button type="danger" size="medium">内部划转</el-button>
      </el-form-item>
      <el-row>
        <el-col :span="11">
          <el-form-item label="收款账户 :" prop="name">
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择收款账户"
              class="form-width"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="户名 :" prop="name">
            <span>潍坊艾瑞克电子商务有限公司</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="转出金额（元） :" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="支持小数点后两位"
              class="form-width"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="可提现金额 :" prop="name">
            <span>000000000元</span>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-button type="danger" size="medium">全部转出</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-form-item label="本次转出手续费 :" prop="name">
            <span class="form-width">0元</span>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="预计到账金额 :" prop="name">
            <span>0元</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="文件上传 :" prop="desc">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-files avatar-uploader-icon"></i>
          <div class="el-upload__text">请上传文件</div>
          <div class="el-upload__tip" slot="tip">
            支持上传.pdf、.jpg、.png、.docx文件，且文件大小不能超过10M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注 :" prop="desc">
        <el-input
          type="textarea"
          v-model="ruleForm.desc"
          class="form-width"
          :rows="6"
          placeholder="请填写备注信息"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="验证码 :" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入验证码"
          class="form-width-button"
        ></el-input>
        <el-button type="danger" size="medium">获取验证码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          class="form-button"
          type="danger"
          @click="submitForm('ruleForm')"
          >转出</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: "Transfer",
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style>
.el-upload__text {
  position: absolute;
  bottom: 35px;
  left: 60px;
  color: #8c939d;
}
.el-upload__tip {
  font-size: 13px;
  color: #8c939d;
}
.head-button-color {
  background-color: #ff4949;
}
.head-buttonTX {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 0;
  border-top: 1px solid #60626667;
  border-bottom: 1px solid #60626667;
  border-left: 1px solid #60626667;
  text-align: center;
  line-height: 32px;
  width: 60px;
  height: 32px;
  background-color: #fff;
}
.head-buttonZH {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
  border-top: 1px solid #60626667;
  border-bottom: 1px solid #60626667;
  border-right: 1px solid #60626667;
  text-align: center;
  line-height: 32px;
  width: 60px;
  height: 32px;
  background-color: #fff;
}
.form-button {
  transform: translateX(450px);
  margin-top: 20px;
}
.form-width {
  width: 450px;
}
.form-width-button {
  width: 200px;
  margin-right: 30px;
}
.box-card {
  padding-top: 10px;
}
/* 文件上传样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
